<template>
    <div class="singerpage">
        <div class="singercontainer" v-for="item in singerlist" :key="item.classid"
             @click="enter(item.classid)">
            <el-image :src="item.imgurl.replace('/{size}','')" lazy></el-image>
            <div class="content">{{item.classname}}</div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
  export default {
    name: 'singer',
    data() {
      return {
        singerlist: []
      }
    },
    created() {
      this.getSingerlist();
    },
    methods: {
      enter(id) {
        this.$router.push('/singer/' + id)
      },
      getSingerlist() {
        this.$axios.get(this.HOST + '/singer/class&json=true').then(res => {
          this.singerlist = res.data.list;
        })
      }
    }
  }
</script>
<style scoped>
    .singerpage {
        overflow: auto;
        height: 100vh;
    }

    .singercontainer {
        display: flex;
        padding: 1rem 1rem;
        border-bottom: 1px solid #555657;
    }

    .el-image {
        height: 5rem;
        width: 5rem;
        border-radius: 20%;
    }

    .content {
        padding-left: 1rem;
        /*行高和排行榜图片保持一致 居中*/
        font-size: 1rem;
        line-height: 5rem;
    }

</style>
